<template>
  <div class="email-verification">
    <h2>Phone Verification</h2>
    <el-form label-position="left" label-width="200px" :model="phoneForm">
      <el-form-item label="Country Code">
        <el-select v-model="phoneForm.country_code" placeholder="Thailand" @input="testAndVerify">
          <el-option v-for="item in areaCode" :key="item.value" :label="item.value" :value="item.key">
            <span style="float: left">{{ item.value }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.key }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Phone Number">
        <el-input v-model="phoneForm.phone" @input="testAndVerify" placeholder="Enter Phone Number"></el-input>
      </el-form-item>
      <el-form-item label="Email Verification Code">
        <el-input v-model="phoneForm.email_code" @input="testAndVerify" class="email-code" placeholder="Enter Email Code"></el-input>
        <el-button type="warning" plain class="get-code" ref="emailCode" @click="getEnailCode('emailCode', 1)" >Get Code</el-button>
      </el-form-item>
      <el-form-item label="SMS Code">
        <el-input v-model="phoneForm.sms_code" @input="testAndVerify" class="email-code" placeholder="Enter SMS Code"></el-input>
        <el-button type="warning" class="get-code" ref="phoneCode" @click="getEnailCode('phoneCode', 0)" plain>Get Code</el-button>
      </el-form-item>
      <el-form-item>
        <el-button :type="primary" :disabled="confirmdb" @click="emailConfing" class="email-confirm">CONFIRM</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { areaCode } from "@/assets/js/country";
import { setTime, resend } from "@/filter/index";
import { verCode, emailCode } from "@/api/userLogin";
import { bindPhone } from "@/api/kycAttest";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      areaCode: areaCode,
      phoneForm: {
      	country_code: "",
        phone: "",
        email_code: "",
        sms_code: "",
      },
      confirmdb: true,
      primary: 'info'
    };
  },
  computed: {
    ...mapGetters({
      someinfo: "someinfo"
    })
  },
  methods: {
    /**
     * [getEnailCode description]
     * 获取验证码
     * --------------------------
     * @Author   LLP
     * @DateTime 2019-12-23T18:07:26+0800
     * @param    {[type]}                 code [description]
     * @param    {[type]}                 type [description]
     * @return   {[type]}                      [description]
     */
    async getEnailCode(code, type) {
      if (type) {
        resend(this.$refs[code])
        let param = {
          type: '04',
          email: this.someinfo.email
        }
        let {data} = await emailCode(param)
        if (data === null) {
          this.$message({
            message: 'The verification code has been sent, please check.',
            type: 'success'
          });
        }
      } else {
        if (this.phoneForm.phone === '') {
          this.$message({
            message: 'Please enter your phone account.',
            type: 'warning'
          });
        } else {
          resend(this.$refs[code])
          let param = {
            type: '04',
            phone:this.phoneForm.country_code + this.phoneForm.phone
          }
          let {data} = await verCode(param)
          if (data === null) {
            this.$message({
              message: 'The verification code has been sent, please check.',
              type: 'success'
            });
          }
        }
      }
    },
    /**
     * [emailConfing description]
     * 绑定手机号
     * -----------------------------
     * @Author   LLP
     * @DateTime 2019-12-23T18:22:36+0800
     * @return   {[type]}                 [description]
     */
    async emailConfing() {
      let param = {
        ...this.phoneForm,
        phone: this.phoneForm.country_code + this.phoneForm.phone,
      }
      let { data } = await bindPhone(param)
      if (data === null) {
        this.$message({
          message: 'Phone binding succeeded.',
          type: 'success'
        });
        this.$store.dispatch('setsomeinfo')
        this.$router.push({ path: '/account' })
      }
    },
    /**
     * @name: 按钮是否可操作
     * --------------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */ 
    testAndVerify() {
      let from = this.phoneForm
      if (from.country_code !="" && from.phone !="" && (from.email_code !="" && from.sms_code)) {
        this.confirmdb = false
        this.primary = 'primary'
      } else {
        this.confirmdb = true
        this.primary = 'info'
      }
    }
  }
};
</script>
<style lang="less" scoped>
.email-verification {
  height: 100vh;
  h2 {
    font-size: 26px;
    display: inline-block;
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 2px solid #edf0f4;
  }
  .el-form {
    padding: 45px 160px 0 0;
    .email-code {
      width: 450px;
      margin-right: 38px;
      display: inline-block;
    }
    .get-code {
      width: 105px;
    }
    .email-confirm {
      width: 100%;
    }
  }
}
</style>